<template>
  <div>
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 用户列表卡片区 -->
    <el-card class="box-card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="部门" label-width="70px">
          <el-select
            clearable
            v-model="formInline.city"
            placeholder="请选择所属部门"
          >
            <el-option
              v-for="item in cities"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
              <span style="float: left">{{ item.label }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{
                item.value
              }}</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户名" label-width="70px">
          <el-input
            clearable
            v-model="formInline.user"
            placeholder="请输入用户名查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" label-width="70px">
          <el-input
            clearable
            v-model="formInline.email"
            placeholder="请输入邮箱查询"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" label-width="70px">
          <el-radio-group clearable v-model="formInline.radio">
            <el-radio :label="3">男</el-radio>
            <el-radio :label="6">女</el-radio>
            <el-radio :label="9">全部</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="昵称" label-width="70px">
          <el-input
            clearable
            v-model="formInline.nikeName"
            placeholder="请输入昵称查询"
          ></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 50px">
          <el-button icon="el-icon-refresh">重置</el-button>
          <el-button type="primary" icon="el-icon-search">查询</el-button>
          <el-button type="success" icon="el-icon-plus">添加</el-button>
          <el-button @click="downExcel" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
      <!--表格-->
      <el-table :data="tableData" border style="width: 100%; height: 450px">
         <el-table-column prop="id" label="#" width="50">
        </el-table-column>
        <el-table-column prop="username" sortable label="用户名" width="120">
        </el-table-column>
        <el-table-column prop="sex" label="性别" width="100">
          <template slot-scope="scope">
            {{scope.row.sex=='0'?'男':(scope.row.sex=='1'?'女':'保密')}}
          </template>
        </el-table-column>
        <el-table-column prop="departmentId" sortable label="所属部门" width="120">
        </el-table-column>
        <el-table-column prop="birth" sortable label="生日" width="180">
        </el-table-column>
        <el-table-column prop="email" label="邮箱" width="180">
        </el-table-column>
        <el-table-column prop="phoneNumber" label="电话" width="180">
        </el-table-column>
        <el-table-column prop="status" label="是否禁用" width="100">
          <template slot-scope="scope">
           <el-switch
              v-model="scope.row.status==1"
              active-color="#13ce66"
              inactive-color="#ff4949">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" >
          <template slot-scope="">
            <el-button type="primary" size="mini" icon="el-icon-edit" circle></el-button>
            <el-button type="success" size="mini" icon="el-icon-delete" circle></el-button>
            <el-button type="info" size="mini" icon="el-icon-s-tools" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页功能-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
 import { findUserListPage } from '../../api/users'
export default {
  name: "Users",
  data() {
    return {
       currentPage4: 4,
      formInline: {
        user: "",
        region: "",
        city: "",
        email: "",
        radio: 3,
        nikeName: "",
      },
      cities: [
        {
          value: "Beijing",
          label: "北京",
        },
        {
          value: "Shanghai",
          label: "上海",
        },
        {
          value: "Nanjing",
          label: "南京",
        },
        {
          value: "Chengdu",
          label: "成都",
        },
        {
          value: "Shenzhen",
          label: "深圳",
        },
        {
          value: "Guangzhou",
          label: "广州",
        },
      ],
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1517 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1519 弄",
          zip: 200333,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1516 弄",
          zip: 200333,
        },
      ],
      total : 1,
    };
  },
  created () {
    this.getUserListPage();
  },
  methods: {
    onSubmit() {
      console.log("submit!");
      this.getUserListPage();
    },
    async getUserListPage(){
        const {data} = await findUserListPage();
        debugger;
        this.tableData = data.data.records.records;
   },
     handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      },
      downExcel() {

      },
  },
};
</script>
<style lang="less" scoped>
.box-card {
  width: 100%;
  text-align: left;
}
</style>